<template>
  <!-- nav模块 -->
  <div class="w">
    <ul class="item_list">
      <li v-for="item of topCateList" :key="item.cat_id" class="item_box" @click="handleRoute(item.cat_id)">
        <img :src="item.cat_icon" class="item_img" />
        <span class="item_title">{{ item.cat_name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  name: 'HomeNav',
  data () {
    return {}
  },
  computed: {
    // 获取一级分类列表
    ...mapGetters(['topCateList'])
  },
  methods: {
    ...mapMutations(['getCatePid']),
    handleRoute (id) {
      // this.getCatePid(id)
      this.$router.push('/goods/' + id)
    }
  }
}
</script>

<style lang="less" scoped>
.item_list {
  display: flex;
  flex-wrap: wrap;
  .item_box {
    flex: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .2rem 0;
    .item_img {
      width: 2rem;
      height: 2rem;
      vertical-align: middle;
    }
    .item_title {
      display: block;
      font-size: .56rem;
      color: #666;
    }
  }
}
</style>
